<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <title>动态创建节点元素</title>
  <script type="text/javascript">
	function createSelect(){
		//获取文本值
		var numberValue = document.getElementById("number").value;
		//获取select节点元素
		var selectNode = document.getElementById("select1");
		  //创建一个option新节点
		var optionNode = document.createElement("option");
		optionNode.setAttribute("value",numberValue);
		optionNode.appendChild(document.createTextNode(numberValue));

		//吧创建的节点追加到select节点的末尾
		selectNode.appendChild(optionNode);
	}

	function deleteSelect(){
		//获取select节点元素
		var selectNode = document.getElementById("select1");
		//获取当前select选中的option节点下标
		var index = selectNode.selectedIndex;
		if(index<0){
			alert("select节点未被选中，请选择..");
			return ;
		}
		
		//通过父类节点删除指定坐标的子类节点元素
		selectNode.removeChild(selectNode.options[index]);
	}

	function updateSelect(){
		//获取select节点元素
		var selectNode = document.getElementById("select1");
		//获取当前select选中的option节点下标
		var index = selectNode.selectedIndex;
		if(index<0){
			alert("select节点未被选中，请选择..");
			return ;
		}
		//选中的option节点
		var optionNode = selectNode.options[index]; 

		//创建新的option节点
		var numberValue = document.getElementById("number").value;
		var newOptionNode = document.createElement("option");
		newOptionNode.setAttribute("value",numberValue);
		newOptionNode.appendChild(document.createTextNode(numberValue));

		//新节点把选择的旧节点覆盖(替换)
		selectNode.replaceChild(newOptionNode,optionNode);
	}
  </script>
  <style>
	select,input{
		width:200px;
		margin: 10px 0px 5px 0px;
	}
  </style>
 </head>
 <body>
 	<input type="text" id="number" /><br/>
	<button onclick="createSelect();">创建节点</button>
	<button onclick="deleteSelect();">移除节点</button>
	<button onclick="updateSelect();">修改节点</button>
	<br/>
 	<select size="20" id="select1">
		<option value="湖北省">湖北省</option>
		<option value="湖北省">湖北省</option>
		<option value="湖北省">湖北省</option>
		<option value="湖北省">湖北省</option>
		<option value="广东省" selected="selected">广东省</option>
		<option value="湖北省">湖北省</option>
		<option value="湖北省">湖北省</option>
		<option value="湖北省">湖北省</option>
		<option value="湖北省">湖北省</option>
	</select>
  
 </body>
</html>
